<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目详情 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <button class="header-back">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="header-title">项目详情</h1>
            <button class="header-action" onclick="shareProject()">
                <i class="fas fa-share"></i>
            </button>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Project Hero -->
            <div class="mb-6">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1497486751825-1233686d5d80?w=600&h=300&fit=crop" 
                         alt="山区儿童图书捐赠" 
                         class="w-full h-48 object-cover rounded-xl">
                    <div class="absolute top-4 left-4 bg-primary-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                        🔥 热门项目
                    </div>
                    <div class="absolute top-4 right-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
                        78% 完成
                    </div>
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-xl">
                        <h1 class="text-xl font-bold text-white mb-1">山区儿童图书捐赠</h1>
                        <p class="text-sm text-white opacity-90">希望教育基金会</p>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="card text-center">
                    <div class="text-2xl font-bold text-primary mb-1">156</div>
                    <div class="text-sm text-neutral-600">参与人数</div>
                    <div class="text-xs text-neutral-500">本月 +23</div>
                </div>
                <div class="card text-center">
                    <div class="text-2xl font-bold text-success-500 mb-1">¥7,800</div>
                    <div class="text-sm text-neutral-600">已筹集</div>
                    <div class="text-xs text-neutral-500">目标 ¥10,000</div>
                </div>
                <div class="card text-center">
                    <div class="text-2xl font-bold text-warning-500 mb-1">15</div>
                    <div class="text-sm text-neutral-600">受益村庄</div>
                    <div class="text-xs text-neutral-500">覆盖范围</div>
                </div>
                <div class="card text-center">
                    <div class="text-2xl font-bold text-info-500 mb-1">500+</div>
                    <div class="text-sm text-neutral-600">受益儿童</div>
                    <div class="text-xs text-neutral-500">预计人数</div>
                </div>
            </div>

            <!-- Progress Bar -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-chart-line mr-2 text-primary"></i>
                    筹集进度
                </h3>
                <div class="mb-4">
                    <div class="flex items-center justify-between text-sm mb-2">
                        <span class="text-neutral-600">筹集进度</span>
                        <span class="font-medium">¥7,800 / ¥10,000</span>
                    </div>
                    <div class="w-full bg-neutral-200 rounded-full h-3">
                        <div class="bg-gradient-to-r from-primary-500 to-secondary-500 h-3 rounded-full relative" style="width: 78%;">
                            <div class="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white border-2 border-primary-500 rounded-full"></div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-neutral-500 mt-1">
                        <span>已完成 78%</span>
                        <span>还需 ¥2,200</span>
                    </div>
                </div>
                <div class="bg-primary-50 rounded-lg p-3">
                    <div class="text-sm font-medium text-primary mb-1">🎯 即将达成目标</div>
                    <p class="text-xs text-neutral-700">还差22%就能完成这个有意义的项目了！你的参与将帮助更多山区孩子获得阅读机会。</p>
                </div>
            </div>

            <!-- Project Description -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-info-circle mr-2 text-primary"></i>
                    项目介绍
                </h3>
                <div class="prose text-sm leading-relaxed text-neutral-700">
                    <p class="mb-4">
                        <strong>项目背景：</strong>在中国的偏远山区，许多孩子由于地理条件和经济原因，很难接触到丰富的课外读物。他们渴望知识，却缺少获取知识的途径。
                    </p>
                    <p class="mb-4">
                        <strong>项目目标：</strong>为偏远山区的15个村庄建立小型图书角，为500多名儿童提供适合的课外读物，让每个孩子都能享受阅读的快乐，开拓视野，启发梦想。
                    </p>
                    <p class="mb-4">
                        <strong>资金用途：</strong>
                    </p>
                    <ul class="list-disc list-inside mb-4 space-y-1">
                        <li>购买适合不同年龄段的课外读物 (70%)</li>
                        <li>建设图书角的基础设施 (20%)</li>
                        <li>运输和后续维护费用 (10%)</li>
                    </ul>
                    <p>
                        <strong>预期成果：</strong>预计将惠及500多名6-14岁的山区儿童，提升他们的阅读能力和学习兴趣，为他们的未来发展奠定基础。
                    </p>
                </div>
            </div>

            <!-- Organization Info -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-building mr-2 text-primary"></i>
                    发起机构
                </h3>
                <div class="flex items-start">
                    <div class="w-16 h-16 bg-gradient-to-br from-primary-400 to-secondary-400 rounded-xl flex items-center justify-center text-white text-2xl mr-4">
                        🏫
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold mb-1">希望教育基金会</h4>
                        <p class="text-sm text-neutral-600 mb-2">成立于2018年，专注于偏远地区教育事业发展</p>
                        <div class="flex items-center gap-4 text-xs text-neutral-500">
                            <span><i class="fas fa-calendar mr-1"></i>7年经验</span>
                            <span><i class="fas fa-project-diagram mr-1"></i>完成42个项目</span>
                            <span><i class="fas fa-users mr-1"></i>帮助8000+儿童</span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-neutral-200">
                    <div class="grid grid-cols-3 gap-4 text-center">
                        <div>
                            <div class="text-lg font-bold text-success-500">99.2%</div>
                            <div class="text-xs text-neutral-600">资金透明度</div>
                        </div>
                        <div>
                            <div class="text-lg font-bold text-primary">A+</div>
                            <div class="text-xs text-neutral-600">信用等级</div>
                        </div>
                        <div>
                            <div class="text-lg font-bold text-warning-500">4.9</div>
                            <div class="text-xs text-neutral-600">用户评分</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Impact Preview -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-heart mr-2 text-secondary"></i>
                    预期影响
                </h3>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center mr-3 mt-1">
                            <i class="fas fa-book text-primary text-xs"></i>
                        </div>
                        <div>
                            <div class="font-medium text-sm mb-1">提升阅读能力</div>
                            <p class="text-xs text-neutral-600">为500多名儿童提供丰富的阅读资源，培养良好的阅读习惯</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-8 h-8 bg-secondary-100 rounded-full flex items-center justify-center mr-3 mt-1">
                            <i class="fas fa-lightbulb text-secondary text-xs"></i>
                        </div>
                        <div>
                            <div class="font-medium text-sm mb-1">拓展知识视野</div>
                            <p class="text-xs text-neutral-600">通过多元化的读物，让山区孩子了解外面的世界</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-8 h-8 bg-success-100 rounded-full flex items-center justify-center mr-3 mt-1">
                            <i class="fas fa-graduation-cap text-success-500 text-xs"></i>
                        </div>
                        <div>
                            <div class="font-medium text-sm mb-1">激发学习兴趣</div>
                            <p class="text-xs text-neutral-600">培养孩子们的学习热情，为未来发展打下基础</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-8 h-8 bg-warning-100 rounded-full flex items-center justify-center mr-3 mt-1">
                            <i class="fas fa-users text-warning-500 text-xs"></i>
                        </div>
                        <div>
                            <div class="font-medium text-sm mb-1">促进社区发展</div>
                            <p class="text-xs text-neutral-600">带动当地教育事业发展，提升整体文化水平</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Participants -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-users mr-2 text-primary"></i>
                    最近参与者
                    <span class="text-xs text-neutral-500 ml-2">(匿名显示)</span>
                </h3>
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gradient-to-br from-primary-400 to-secondary-400 rounded-full flex items-center justify-center text-white text-sm mr-3">
                                A
                            </div>
                            <div>
                                <div class="text-sm font-medium">暖心用户A</div>
                                <div class="text-xs text-neutral-500">2分钟前参与</div>
                            </div>
                        </div>
                        <div class="text-sm font-medium text-primary">+50 暖心币</div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gradient-to-br from-success-400 to-info-400 rounded-full flex items-center justify-center text-white text-sm mr-3">
                                B
                            </div>
                            <div>
                                <div class="text-sm font-medium">暖心用户B</div>
                                <div class="text-xs text-neutral-500">15分钟前参与</div>
                            </div>
                        </div>
                        <div class="text-sm font-medium text-primary">+50 暖心币</div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gradient-to-br from-warning-400 to-error-400 rounded-full flex items-center justify-center text-white text-sm mr-3">
                                C
                            </div>
                            <div>
                                <div class="text-sm font-medium">暖心用户C</div>
                                <div class="text-xs text-neutral-500">1小时前参与</div>
                            </div>
                        </div>
                        <div class="text-sm font-medium text-primary">+30 暖心币</div>
                    </div>
                </div>
                <button class="btn-text w-full mt-4">
                    查看全部参与者 <i class="fas fa-chevron-right icon-xs ml-1"></i>
                </button>
            </div>

            <!-- Participation Rewards -->
            <div class="card bg-gradient-to-r from-success-50 to-primary-50">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-gift mr-2 text-success-500"></i>
                    参与奖励
                </h3>
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div class="text-center">
                        <div class="text-2xl mb-1">🏆</div>
                        <div class="text-sm font-medium">专属徽章</div>
                        <div class="text-xs text-neutral-600">爱心天使</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl mb-1">📜</div>
                        <div class="text-sm font-medium">感谢证书</div>
                        <div class="text-xs text-neutral-600">电子版</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl mb-1">⭐</div>
                        <div class="text-sm font-medium">公益积分</div>
                        <div class="text-xs text-neutral-600">+50分</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl mb-1">📊</div>
                        <div class="text-sm font-medium">进度报告</div>
                        <div class="text-xs text-neutral-600">月度更新</div>
                    </div>
                </div>
                <div class="bg-white bg-opacity-70 rounded-lg p-3 text-center">
                    <div class="text-sm font-medium text-success-600 mb-1">💖 特别奖励</div>
                    <p class="text-xs text-neutral-700">参与后将收到孩子们的手写感谢信(电子版)</p>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="page-footer p-4">
            <div class="card mb-4">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-sm text-neutral-600">参与费用</div>
                        <div class="text-2xl font-bold text-primary">50 暖心币</div>
                        <div class="text-xs text-neutral-500">≈ ¥100 公益价值</div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm text-neutral-600">我的余额</div>
                        <div class="text-lg font-semibold" id="userCurrency">128 暖心币</div>
                        <div class="text-xs text-success-500">✓ 余额充足</div>
                    </div>
                </div>
            </div>
            <button onclick="participateNow()" class="btn btn-primary w-full btn-lg">
                <i class="fas fa-heart mr-2"></i>
                立即参与 (50 暖心币)
            </button>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 项目详情页面管理器
        class ProjectDetailManager {
            constructor() {
                this.projectId = null;
                this.projectData = null;
                this.init();
            }

            init() {
                this.loadProjectData();
                this.updateUserCurrency();
                this.initAnimations();
            }

            loadProjectData() {
                // 从URL参数获取项目ID
                const urlParams = new URLSearchParams(window.location.search);
                this.projectId = urlParams.get('id') || 'charity001';
                
                // 模拟项目数据
                const projects = {
                    'charity001': {
                        name: '山区儿童图书捐赠',
                        organization: '希望教育基金会',
                        cost: 50,
                        progress: 78,
                        raised: 7800,
                        target: 10000,
                        participants: 156
                    },
                    'charity002': {
                        name: '老人院暖心陪伴',
                        organization: '夕阳红公益协会',
                        cost: 30,
                        progress: 92,
                        raised: 4600,
                        target: 5000,
                        participants: 203
                    },
                    'charity003': {
                        name: '海洋清洁行动',
                        organization: '蓝色海洋基金会',
                        cost: 40,
                        progress: 23,
                        raised: 2300,
                        target: 10000,
                        participants: 89
                    }
                };
                
                this.projectData = projects[this.projectId] || projects['charity001'];
                console.log('项目数据已加载:', this.projectData);
            }

            updateUserCurrency() {
                if (window.App && App.data.user) {
                    const currencyElement = document.getElementById('userCurrency');
                    if (currencyElement) {
                        const currency = App.data.user.currency;
                        currencyElement.textContent = `${currency} 暖心币`;
                        
                        // 检查余额是否充足
                        const statusElement = currencyElement.nextElementSibling;
                        if (currency >= this.projectData.cost) {
                            statusElement.textContent = '✓ 余额充足';
                            statusElement.className = 'text-xs text-success-500';
                        } else {
                            statusElement.textContent = `✗ 还需 ${this.projectData.cost - currency} 暖心币`;
                            statusElement.className = 'text-xs text-error-500';
                        }
                    }
                }
            }

            initAnimations() {
                const cards = document.querySelectorAll('.card');
                cards.forEach((card, index) => {
                    setTimeout(() => {
                        card.style.animation = 'fadeInUp 0.5s ease forwards';
                    }, index * 100);
                });
            }

            participateInProject() {
                if (!window.App) return;
                
                const userCurrency = App.data.user.currency;
                const cost = this.projectData.cost;
                
                if (userCurrency < cost) {
                    App.utils.showToast(`暖心币不足，还需要 ${cost - userCurrency} 枚`, 'warning');
                    return;
                }
                
                // 确认参与
                const confirmed = confirm(`确定要参与「${this.projectData.name}」项目吗？\n\n- 消耗 ${cost} 枚暖心币\n- 获得专属徽章和感谢证书\n- 收到项目进度更新\n- 为 ${this.projectData.organization} 贡献爱心`);
                
                if (!confirmed) return;
                
                // 扣除暖心币
                App.data.user.currency -= cost;
                App.data.user.stats.charityValue += cost;
                
                // 更新显示
                this.updateUserCurrency();
                
                // 显示成功消息
                App.utils.showToast(`🎉 成功参与「${this.projectData.name}」！`, 'success');
                
                // 显示奖励信息
                setTimeout(() => {
                    App.utils.showToast('🏆 获得"爱心天使"徽章！', 'success');
                }, 1500);
                
                setTimeout(() => {
                    App.utils.showToast('📜 感谢证书已发送到您的档案', 'info');
                }, 3000);
                
                // 跳转回商城或显示感谢页面
                setTimeout(() => {
                    const goToStore = confirm('是否查看更多公益项目？');
                    if (goToStore) {
                        window.location.href = 'store.html';
                    }
                }, 4500);
            }

            shareProject() {
                const shareData = {
                    title: `${this.projectData.name} - 暖言树洞公益项目`,
                    text: `一起来参与「${this.projectData.name}」公益项目，用温暖改变世界！`,
                    url: window.location.href
                };

                if (navigator.share) {
                    navigator.share(shareData);
                } else {
                    navigator.clipboard.writeText(window.location.href).then(() => {
                        App.utils.showToast('项目链接已复制到剪贴板', 'success');
                    });
                }
            }
        }

        // 全局函数
        function participateNow() {
            if (window.projectManager) {
                projectManager.participateInProject();
            }
        }

        function shareProject() {
            if (window.projectManager) {
                projectManager.shareProject();
            }
        }

        // 页面初始化
        let projectManager;
        
        document.addEventListener('DOMContentLoaded', function() {
            projectManager = new ProjectDetailManager();
        });
    </script>

    <style>
        /* 网格布局 */
        .grid {
            display: grid;
        }

        .grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        /* 图片样式 */
        .w-full {
            width: 100%;
        }

        .h-48 {
            height: 12rem;
        }

        .h-16 {
            height: 4rem;
        }

        .w-16 {
            width: 4rem;
        }

        .w-8 {
            width: 2rem;
        }

        .h-8 {
            height: 2rem;
        }

        .object-cover {
            object-fit: cover;
        }

        /* 定位 */
        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
        }

        .top-4 {
            top: 1rem;
        }

        .left-4 {
            left: 1rem;
        }

        .right-4 {
            right: 1rem;
        }

        .bottom-0 {
            bottom: 0;
        }

        /* 列表样式 */
        .list-disc {
            list-style-type: disc;
        }

        .list-inside {
            list-style-position: inside;
        }

        /* 间距 */
        .space-y-1 > * + * {
            margin-top: 0.25rem;
        }

        .space-y-3 > * + * {
            margin-top: 0.75rem;
        }

        .space-y-4 > * + * {
            margin-top: 1rem;
        }

        /* 渐变背景 */
        .bg-gradient-to-t {
            background-image: linear-gradient(to top, var(--bg-start), var(--bg-end));
        }

        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--bg-start), var(--bg-end));
        }

        .bg-gradient-to-br {
            background-image: linear-gradient(to bottom right, var(--bg-start), var(--bg-end));
        }

        .from-black {
            --bg-start: rgba(0, 0, 0, 0.7);
        }

        .to-transparent {
            --bg-end: transparent;
        }

        .from-primary-500 {
            --bg-start: var(--primary-500);
        }

        .to-secondary-500 {
            --bg-end: var(--secondary-500);
        }

        .from-primary-400 {
            --bg-start: var(--primary-400);
        }

        .to-secondary-400 {
            --bg-end: var(--secondary-400);
        }

        .from-success-400 {
            --bg-start: var(--success-400);
        }

        .to-info-400 {
            --bg-end: var(--info-400);
        }

        .from-warning-400 {
            --bg-start: var(--warning-400);
        }

        .to-error-400 {
            --bg-end: var(--error-500);
        }

        .from-success-50 {
            --bg-start: var(--success-50);
        }

        .to-primary-50 {
            --bg-end: var(--primary-50);
        }

        /* 背景透明度 */
        .bg-opacity-50 {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .bg-opacity-70 {
            background-color: rgba(255, 255, 255, 0.7);
        }

        /* 变换 */
        .transform {
            transform: var(--transform);
        }

        .translate-x-1\/2 {
            --transform: translateX(50%) var(--transform-y, '') var(--transform-scale, '');
        }

        .-translate-y-1\/2 {
            --transform-y: translateY(-50%);
        }

        /* 响应式调整 */
        @media (max-width: 640px) {
            .h-48 {
                height: 8rem;
            }
            
            .grid-cols-2,
            .grid-cols-3 {
                gap: 0.5rem;
            }
            
            .w-16,
            .h-16 {
                width: 3rem;
                height: 3rem;
            }
            
            .text-2xl {
                font-size: 1.25rem;
            }
        }
    </style>
</body>
</html>
